<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./book.js"></script>
    <link rel="stylesheet" href="./foot.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: rgb(244, 245, 247);
        }

        .book_box {
            display: flex;
        }

        .book_box ul {
            width: 90px;
            height: 600px;
            padding-inline-start: 0;
            background-color: #fff;
            list-style: none;
        }

        .book_box li {
            width: 80px;
            height: 60px;
            line-height: 60px;
            padding-left: 10px;
        }

        .book_box li:hover {
            background-color: rgb(247, 248, 250);
        }

        .book_box .active {
            border-left: 4px solid rgb(57, 169, 237);
        }

        .book_img {
            padding-top: 10px;
            height: 200px;
            background-color: #fff;
            margin-left: 20px;
            box-shadow: 3px 3px rgb(226, 226, 226);
        }

        .book_img img {
            width: 160px;
            text-align: center;
        }

        .book_img h3 {
            text-align: center;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="classification_box">
        <div class="book_box">
            <ul>
                <li class="active">小说</li>
                <li>童书类</li>
                <li>生活</li>
                <li>人文社科</li>
                <li>漫画</li>
                <li>励志</li>
                <li>经管</li>
                <li>教育</li>
            </ul>
            <div class="book_img">
                <img src="http://img3m2.ddimg.cn/1/6/29239552-1_w_18.jpg" class="img" alt="">
                <h3>字母表谜案</h3>
            </div>
        </div>
    </div>
    <footer>
        <div class="foot_box1">
            <img src="./img/icon_book_noselected.png" alt=""><a href="./HomePage.html">首页</a>
        </div>
        <div class="foot_box4">
            <img src="./img/icon_sort_selected.png" alt=""><a>分类</a>
        </div>
        <div class="foot_box2">
            <img src="./img/icon_car_noselected.png" alt=""><a href="./Shopping.html">购物车</a>
        </div>
        <div class="foot_box3">
            <img src="./img/icon_mine_noselected.png" alt=""><a href="./me.html">我的</a>
        </div>
    </footer>
</body>
<script>
    const lis = document.querySelectorAll('.book_box li')
    const [{ id, bookName, originalPrice, presentPrice, content, thumbSrc, detailSrc, author }] = books
    const img = document.querySelector('.book_img')
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function (e) {
            for (let index = 0; index < lis.length; index++) {
                lis[index].classList.remove('active')
                e.target.classList.add('active')
            }

            document.querySelector('.book_img').innerHTML = `
                <img src=${books[i].thumbSrc} alt="">
                <h3>${books[i].bookName}</h3>
            `

            img.addEventListener('click', function (e) {
                if (e.target.tagName === 'IMG') {
                    location.href = './information.html?id=' + books[i].id
                }
            })
        })
    }
    document.querySelector('.img').addEventListener('click', function (e) {
        if (e.target.tagName === 'IMG') {
            location.href = './information.html?id=' + books[0].id
        }
    })

    
</script>

</html>